<template>
	<form class="auth-app">
		<view class="tip">
			<view>开必来</view>
		</view>
		<!--
		<view class="tabs">
			<view class="tab-item" :class="{current:loginBy=='password'}" @click="setCurrent('password')">密码登录</view>
			<view class="tab-item" :class="{current:loginBy=='code'}" @click="setCurrent('code')">验证码登录</view>
		</view>
		-->
		<view class="login-by-password" v-if="loginBy=='password'">
			<view class="field">
				<input class="input" v-model="loginByPasswordForm.username" type="text" placeholder="请输入用户名" name="nameValue" />
			</view>
			<view class="field">
				<input class="input" v-model="loginByPasswordForm.password" type="password" placeholder="请输入密码" name="passwordValue" />
			</view>
			<view class="button-view" style="margin-top: 20upx;">
				<view class="btn btn-primary btn-big register" hover-class="hover" @click="loginByPassword">登录</view>
				<text style="color:#175199;float:right;margin-right:25upx;margin-top: 20upx;" @click="goRegister">新用户注册</text>
			</view>
		</view>
		
		<view class="login-by-code" v-if="loginBy=='code'" style="position: relative;">
			<view class="field">
				<input class="input" v-model="loginByCodeForm.mobile" type="text" placeholder="请输入手机号" name="nameValue" />
			</view>
			<view class="field" style="display: flex;">
				<input class="input" v-model="loginByCodeForm.code" type="text" placeholder="请输入验证码" />
			</view>
			<view style="width:250upx;position: absolute;right: 20upx;top: 110upx;z-index: 2;">
				<code-button @setError="setCodeFormError" action="2" :phone="loginByCodeForm.mobile" />
			</view>
			<view class="button-view" style="margin-top: 20upx;">
				<view class="btn btn-primary btn-big register" hover-class="hover" @click="loginByCode">登录</view>
				<!--
				<text style="color:#175199;float:right;margin-right:25upx;margin-top: 20upx;" @click="goRegister">新用户注册</text>
				-->
			</view>
		</view>
	</form>
</template>

<script>
	import CodeButton from '@/components/code-button.vue'
	//import JsEncrypt from '@/libs/jsencrypt.js'

	export default {
		data() {
			return {
				loginBy: 'code',
				
				loginByPasswordForm: {
					error: '',
					username: '',
					password: '',
					vercode: '',
					submit: false,
					remember: false,
				},
				loginByCodeForm: {
					inviteCode: '',
					mobile: '',
					error: '',
					code: '',
					submit: false,
					codeBtnEnable: true,
					codeBtnText: '获取验证码'
				},
			};
		},
		components: {
			CodeButton
		},
		methods: {
			goRegister() {
				this.$emit('show','register')
			},
			setInviteCode(inviteCode) {
				this.loginByCodeForm.inviteCode = inviteCode
			},
			setCodeFormError(error) {
				if (error) {
					uni.showToast({
						icon: "none",
						title: error,
						duration: 2000
					});
				}
			},
			setCurrent(loginBy) {
				this.loginBy = loginBy
			},
			loginByPassword() {
				

			},
			loginByCode() {
				if (this.loginByCodeForm.mobile.length == 0) {
					this.$Message.error('用户名不能为空')
				} else if (this.loginByCodeForm.code.length == 0) {
					this.$Message.error('验证码不能为空')
				} else {
					this.loginByCodeForm.submit = true
					//var wxToken = uni.getStorageSync('wx_token');

					this.$api.post('/user/login', {
						phone: this.loginByCodeForm.mobile,
						authCode: this.loginByCodeForm.code,
						inviteCode: this.loginByCodeForm.inviteCode
					}).then((response) => {
						if (response.ret ===1 ) {
							
							global.setToken(response.data.token)
							this.$Message.success('登录成功')
							
							if (this.loginByCodeForm.inviteCode) {
								//console.log("what");
								
								uni.reLaunch({url: '/pages/tea/v2/map'})
								/*
								uni.switchTab({
								    url: '/pages/tea/v2/map',
								    success: function(e) {
								        var page = getCurrentPages().pop();
								        if (page == undefined || page == null) return;
								        page.onLoad();
								    }
								});
								*/
							} else {
								uni.navigateBack({
									delta: 2
								});
							}							
							
						} else {
							this.$Message.error(response.msg)
						}
						this.loginByCodeForm.submit = false
					})
					
				}
			},
			register() {
				console.log("前往注册页面")
			}
		}
	}
</script>

<style lang="scss">
	
	/* 登录 */
	.auth-app{
		font-size: $uni-font-size-lg;
		.tip{
			background-color: #1D2C6D;
			height: 300upx;
			font-size:60upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: white;
			margin-bottom:10upx;
		}
		.tabs {
			display: flex;
			height: 60upx;
			border-bottom: 3upx solid #ccc;
			margin-bottom: 0upx;
		
			.tab-item {
				text-align: center;
				width: 50%;
				font-size: $uni-font-size-lg;
				line-height: 60upx;
			}
		
			.current {
				border-bottom: 1upx solid #2d8cf0;
				color: #2d8cf0;
			}
		}
		
		.loginView {
			display: flex;
			flex: 1;
			flex-direction: column;
			width: 750upx;
			min-height: 100vh;
			padding-top: 30upx;
		}
		
		.field {
			border-bottom-style: solid;
			border-bottom-width: 1upx;
			border-bottom-color: #ddd;
			background-color: #fff;
			flex-direction: row;
			width: 750upx;
			padding: 20upx 20upx;
			box-sizing: border-box;
		}
		
		.input {
			flex: 1;
			height: 60upx;
			align-items: center;
		}
		
		.actions {
			width: 750upx;
			margin-top: 50upx;
			padding: 0 20upx;
			box-sizing: border-box;
			flex-direction: column;
		}
		
		
		.login {
			background-color: #23cf5f;
			color: #fff;
		}
		
		.register {
			color: white;
			border-color: #23cf5f;
			border-width: 2upx;
			width: 660upx;
			margin: 0 auto;
			margin-top: 30upx;
			font-size: $uni-font-size-lg;
		}
		
		.register.hover,
		.login.hover {
			opacity: 0.6;
		}
	}
	
</style>
